<template>
  <section class="services">
    <h1>产品与服务</h1>
    <div class="service-list">
      <div class="service-item">
        <h2>定制开发</h2>
        <p>为企业量身打造专属软件系统，满足个性化需求。</p>
      </div>
      <div class="service-item">
        <h2>数据可视化</h2>
        <p>提供专业的数据分析与可视化解决方案，助力决策。</p>
      </div>
      <div class="service-item">
        <h2>技术咨询</h2>
        <p>为企业提供IT架构、系统优化等全方位技术支持。</p>
      </div>
    </div>
  </section>
</template>

<script setup>
// 产品与服务页面仅展示静态内容
</script>

<style scoped>
.services {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px;
}
.service-list {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.service-item {
  flex: 1 1 260px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px #e3e3e3;
  padding: 24px;
  margin-bottom: 24px;
  min-width: 220px;
}
@media (max-width: 800px) {
  .service-list { flex-direction: column; gap: 16px; }
}
</style> 